<template>
  <div class="table">
    <el-table
      row-key="id"
      :data="dataSource"
      style="width: 100%"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="title" label="菜单名称" />
      <el-table-column prop="component" label="路由地址" align="center" width="300px" />
      <el-table-column prop="component" label="图标" align="center">
        <svg-icon slot-scope="{ row }" :icon-class="row.icon" style="font-size: 20px"></svg-icon>
      </el-table-column>
      <el-table-column label="是否是菜单" align="center">
        <span slot-scope="{ row }">{{ row.isMenu ? '是' : '否' }}</span>
      </el-table-column>
      <el-table-column label="是否开启" align="center">
        <span slot-scope="{ row }">{{ row.status ? '已启用' : '未启用' }}</span>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button v-if="!row.status" type="text" @click="updateEnable(row.id, 1)">
            开启
          </el-button>
          <el-button v-else type="text" @click="updateEnable(row.id, 0)"> 关闭 </el-button>
          <el-button type="text" @click="update(row.id)"> 修改 </el-button>
          <el-button type="text" @click="deleteMenu(row.id)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-menu-popup
      :dialogVisible.sync="visible"
      :type.sync="editType"
      :id="rowId"
      v-if="visible"
      @getList="getList"
    />
  </div>
</template>

<script>
import AddMenuPopup from './AddMenuPopup.vue'
export default {
  name: 'MenuTable',
  components: {
    AddMenuPopup
  },
  props: {
    addVisible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'platform'
    }
  },
  data() {
    return {
      editType: '',
      rowId: '',
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      dataSource: []
    }
  },
  computed: {
    visible: {
      get() {
        return this.addVisible
      },
      set(val) {
        this.$emit('update:addVisible', val)
      }
    }
  },
  watch: {},
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    async getList() {
      const { data } = await this.$http.system.menu.getList()
      this.dataSource = data
    },
    // 删除
    async deleteMenu(id) {
      this.$handleConfirm({ message: '确认删除吗？' }).then(async () => {
        const { status, msg } = await this.$http.system.menu.delete(id)
        if (status === 200) {
          this.$message.success('已删除！')
          if (this.dataSource.length == 1 && this.listQuery.pageNo > 1) {
            this.listQuery.pageNo--
          }
          this.getList()
        } else {
          this.$message.error(msg)
        }
      })
    },
    // 更新禁用状态
    async updateEnable(id, state) {
      const { status } = await this.$http.system.menu.updateEnable({ status: state, id })
      if (status === 200) {
        this.$message.success(state ? '已开启' : '已关闭')
        this.getList()
      }
    },
    // 修改
    update(id) {
      this.editType = 'update'
      this.rowId = id
      this.$emit('update:addVisible', true)
    }
  }
}
</script>

<style lang="scss" scoped></style>
